<template>
	<div class="index goodlesson">
		<div class="pic-swip" :index="msg">
				<img src="../assets/ProjectPic.png" />
		</div>
		<div class="nav-bot">
			<span @click="openClass"><img  src="../assets/talk1.png" />课程咨询</span>
			<span @click="openJob"><img src="../assets/talk.png"/>就业咨询</span>
		</div>
		<div class="show-pic"  v-bind:class="{show:isShow}">
			<img @click="closePic" ref="showpic" src="../assets/pict.gif" />
		</div>

		<div class="lesson-check">
			<p class="lesson-check-0">

				<span>问题分类：</span>
				<div class="lesson-check-btn0">
				    <button v-for="tab in lesschecks" class="no-active" ref="check"  @click="checklessona($event)">{{tab.item}}</button>
					
				</div>


			</p>
			<p class="lesson-check-1">

				<span>问题难度：</span>
				<div class="lesson-check-btn1">
				<button v-for="tab in lesschecksm" class="no-active" ref="selected" @click="checklessonb($event,tab.item)">{{tab.item}}</button>
					
				</div>


			</p>
		</div>
		<div class="lesson-list">
			<ul class="lesson-list-text">
				<li v-for="item in lessons">
					<img :src="item[0]" />
					<p class="lesson-name">
						<a>{{item[1]}}</a>

					</p>
					<p class="lesson-intr">
					   {{item[2]}}

					</p>
				</li>


			</ul>
			<div class="lesson-divi-page">
				<el-pagination
				  @current-change="handleCurrentChange"
				  :current-page="currentPage"
				  background
				  layout="prev, pager, next"
				  :page-size="9"
				  :total="allpage">
				</el-pagination>
			</div>
		</div>
		
		
		
	</div>
</template>

<script>
	import {swiper,swiperSide} from 'vue-awesome-swiper'
	export default{
		name:'GoodLesson',
		mounted(){
  		this.swipS()
    	},
		data(){
			return {
				 lesschecks:[
					 {item:'全部'},
					 {item:'C'},
					 {item:'C++'},
					 {item:'Linux'},
					 {item:'JAVA'},
					 {item:'测试'}
				 ],
				 lesschecksm:[
					 {item:'全部'},
					 {item:'初级'},
					 {item:'进阶'},
					 {item:'高级'}
				 ],
				 checka:'',/*搜索条件1*/
				 checkb:'',/*搜索条件2*/
				lessons:[],
				allpage:'',
				nowpage:'',
				isShow:false
			}
			},
		methods:{
			openClass(){
				this.isShow = true;
				this.$refs.showpic.src = require("../assets/bg2.png")
			},
			openJob(){
				this.isShow = true;
				this.$refs.showpic.src = require("../assets/pict.gif")
			},
			closePic(){
				this.isShow = false;
			},
	    	swipS(){
	    		this.msg='';
	    		var self = this;

	    		this.$http({
					method:'get',
					url:'/Projects/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					params:{
						Level:'全部',
						Kind:'全部',
						Page:1
					}
				}).then((response)=>{
					  this.$refs.check[0].className = 'active';
						this.$refs.selected[0].className = 'active';
			      self.lessons = response.data[0];
				    self.allpage = response.data[1];
				})
	    	},
	    	checklessona(event){

	    		for(let i=0;i<this.$refs.check.length;i++){
	    		 this.$refs.check[i].className='no-active'
	    		}
	    		event.target.className = 'active';
	    		this.checka = event.target.innerHTML;
	    		console.log(this.checka)
	    		var self = this;
	    		let Page = this.currentPage;
	    		if(Page==undefined){
	    			Page =1;
	    		}
	    		if(this.checka==''){
	    	    this.checka ='全部';
	    		}
	    		if(this.checkb==''){
	    	    this.checkb ='全部';
	    		}
	    		this.$http({
					method:'get',
					url:'/Projects/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					params:{
						Level:self.checkb,
						Kind:self.checka,
						Page:Page
					}
				}).then((response)=>{
			      	self.lessons = response.data[0];
				    self.allpage = response.data[1];
				    self.currentPage = 1;
				})

	    	},
	    	checklessonb(event){

	    		for(let i=0;i<this.$refs.selected.length;i++){
	    		 this.$refs.selected[i].className='no-active'
	    		}
	    		event.target.className = 'active';
	    		this.checkb = event.target.innerHTML;
	    		let Page = this.currentPage;
	    		if(Page==undefined){
	    			Page =1;
	    		}
	    		if(this.checka==''){
	    	    this.checka ='全部';
	    		}
	    		if(this.checkb==''){
	    	    this.checkb ='全部';
	    		}
	    		console.log(this.currentPage)
	    		var self = this;
	    		this.$http({
					method:'get',
					url:'/Projects/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					params:{
						Level:self.checkb,
						Kind:self.checka,
						Page:Page
					}
				}).then((response)=>{
			        self.lessons = response.data[0];
				    self.allpage = response.data[1];
				    self.currentPage = 1;
				})
	    	},
	    	handleCurrentChange(val){
	    		this.currentPage = val;
	    		let Page = this.currentPage;
	    		let self = this;
	    		console.log(this.currentPage)
	    		if(Page==undefined){
	    			Page =1;
	    		}
	    		if(this.checka==''){
	    	    this.checka ='全部';
	    		}
	    		if(this.checkb==''){
	    	    this.checkb ='全部';
	    		}
	    		this.$http({
					method:'get',
					url:'/Projects/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					params:{
						Level:self.checkb,
						Kind:self.checka,
						Page:Page
					}
				}).then((response)=>{
			      	self.lessons = response.data[0];
				    self.allpage = response.data[1];
				})
	    	}
     }

}
</script>

<style>
.nav-bot img{
		width: 30px;
		vertical-align: middle;
		margin-right: 10px;
	}
	.nav-bot span{
		text-align: center;
		display: inline-block;
		float: left;
		width: 50%;
		margin: 0;
		background: white;
		height: 40px;
		font-size: 12px;
		line-height: 40px;
	}
	.show-pic{
		z-index: 10;
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		top: 510px;
		display: none;
	}
	.show{
		display: block!important;
	}
	.show-pic img{
		width: 70%;
		position: relative;
		top: 10px;
		margin-left: 15%;
	}
	button:focus{
		outline: none;
	}
.goodlesson .el-pagination.is-background .btn-next, .goodlesson .el-pagination.is-background .btn-prev, .goodlesson .el-pagination.is-background .el-pager li{
		background-color:white ;
	}
.goodlesson{
	background: white;
}
.el-pagination button{
		height: 20px;
		line-height: 20px;
	}
	.book .el-pagination.is-background .el-pager li{
		min-height: 18px!important;
	}
	.el-pagination.is-background .el-pager li{
		min-width: 14px;
	}
	.el-pager li{
		height: 18px;
		line-height: 18px;
	}
	.goodlesson-more button{
		height: 28px;
		text-align: center;
		border: none;
		font-size: 12px;
		background: orange;
		color: white;
		width: 150px;
		border-radius: 10px 10px;
	}
	.goodlesson-more{
		text-align: center;
	}
	.goodlesson .pic-swip img{
		width: 100%;
		height: 100%;
	}
	.goodlesson .pic-swip{
		width: 100%;
		height: 470px;
		position: relative;
		overflow: hidden;
		top: 0;
	}
	.goodlesson .lesson-check p{
		margin-top: 10px;
		display: inline-block;
		text-align: left;
		width: 80%;
	}
	.lesson-check-btn0,.lesson-check-btn1{
		width: 80%;
		text-align: left;
		display: inline-block;
		
	}
	.goodlesson .lesson-check button{
		margin-top: 10px;
	}
	.goodlesson .lesson-divi-page{
		width: 100%;
		text-align: center;
		height: 60px;
		
	}
	.goodlesson .lesson-list .lesson-list-text {
		width: 80%;
		padding: 0;
		margin-bottom: 20px;
		display: inline-block;
		list-style: none;
		text-align: center;
	}
	.goodlesson .lesson-name{
		font-size: 18px!important;
		 color: #00a5e3;
		 text-align: left;
	}
	.goodlesson .lesson-intr{
		font-size: 12px!important;
		text-align: left;
	}
	.goodlesson .lesson-list .lesson-list-text li{
		position: relative;
		
		width: 100%;
		display: inline-block;
	    height: 290px;
		box-shadow: 2px 2px 5px #e7e5e6;
		margin-top:25px;
	}
	.goodlesson .lesson-list{
		min-height:300px;
		text-align: center;
	}
	.goodlesson .lesson-list img{
		width: 100%;
	}

	.goodlesson .lesson-list ul li p{
	
		position: relative;
		padding-left: 10px;
		padding-right: 10px;
	}

	.goodlesson .lesson-list ul li a{
		font-size: 20px;
		text-align: center;
		color:#00a5e3;
		width:100%;
		height:30px;
	}

	.active{
		background: -moz-linear-gradient(left,#20b8e9,#69e3d8)!important;
		background: -webkit-linear-gradient(left,#20b8e9,#69e3d8)!important;
		color: white;
	}
	.no-active{
		background: #f0f0f0;
		color: black;
	}
	.goodlesson .lesson-check{
		width: 100%;
		text-align: center;
		position: relative;
		top: 30px;
	}
	.goodlesson .lesson-check button{
		border: none;
		font-size: 12px;
		width: 80px;
		margin-right: 10px;
		height: 27px;
		background:#eae8e9 ;
	}
	.goodlesson {
		position: relative;
		top: 80px;
	}	
</style>
